/*
 * @Description: 
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-04-02 16:14:32
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-04 15:37:20
 */
/*
 * @Description: 多功能收索
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-03-30 19:40:26
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-01 21:28:18
 */
import React, { useState } from 'react';
import { Row, Col, Input, Form, Select, DatePicker, Button, Checkbox } from 'antd';
import { CheckOutlined } from '@ant-design/icons';
import './index.css'
import '../../../../button.css'
const { Option } = Select

const SearchForm = () => {
    let data = [
        { id: 1, name: '有订单', falge: false },
        { id: 2, name: '有定单', falge: false },
        { id: 3, name: '有合同', falge: false },
        { id: 4, name: '有售后', falge: false },
        { id: 5, name: '有附件', falge: false },
    ]
    const [selectData, setSelectData] = useState(data);
    //其他选择处理
    function slecletHeadle(e, id) {
        e.stopPropagation();
        let arr = []
        for (let i = 0; i < selectData.length; i++) {
            if (selectData[i].id === id) {
                selectData[i].falge = selectData[i].falge ? false : true
                arr.push(selectData[i])
            } else {
                arr.push(selectData[i])
            }
        }
        // console.log('@@', arr);
        setSelectData(arr)
    }
    return (
        <div className='form-continer'>
            <Form name="basic" >
                <Row>
                    <Col span={8}>
                        <Form.Item label="编号" labelCol={{ span: 8 }} labelAlign={'right'}  >
                            <Input name="No" />
                        </Form.Item>
                        <Form.Item label="职位" labelCol={{ span: 8 }} labelAlign={'right'}  >
                            <Select defaultValue="请选择" name="orderCate">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="网址" labelCol={{ span: 8 }} labelAlign={'right'} >
                            <Input name="URL" />
                        </Form.Item>
                        <Form.Item label="最后更新" labelCol={{ span: 8 }} labelAlign={'right'}  >
                            <DatePicker name="lastTime1" />~
                            <DatePicker name="lastTime2" />
                        </Form.Item>
                        <Form.Item label="详细地址" labelCol={{ span: 8 }} labelAlign={'right'}  >
                            <Input name="site" />
                        </Form.Item>
                        <Form.Item label="预留字段2" labelCol={{ span: 8 }} labelAlign={'right'}  >
                            <Input name="reservedTow" />
                        </Form.Item>
                        <Form.Item label="客服类型" labelCol={{ span: 8 }} labelAlign={'right'} >
                            <Select defaultValue="请选择" name="clientCate">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="商品类别" labelCol={{ span: 8 }} labelAlign={'right'}  >
                            <Select defaultValue="请选择" name="commodity1">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                            <Select defaultValue="请选择" name="commodity2">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="业务员" labelCol={{ span: 8 }} labelAlign={'right'} >
                            <Select defaultValue="请选择" name="salesman">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="客户名称" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Input name="clientName" />
                        </Form.Item>
                        <Form.Item label="手机号码" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'} >
                            <Input name="tel" />
                        </Form.Item>
                        <Form.Item label="所属行业" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Select defaultValue="请选择" name="industry">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="所在地区" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Select defaultValue="请选择" name="area1">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                            <Select defaultValue="请选择" name="area2">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="邮编" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Input name="postcode" />
                        </Form.Item>
                        <Form.Item label="预留字段3" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'} >
                            <Input name="reservedThere" />
                        </Form.Item>
                        <Form.Item label="客户级别" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Select defaultValue="请选择" name="customerLevel">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="部门" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Select defaultValue="请选择" name="department">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="自定义字段搜索" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Select defaultValue="请选择" name="transportation">
                                <Option value="red" >Red</Option>
                                <Option value="green" >Green</Option>
                                <Option value="blue" >Blue</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="电子邮箱" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Input name="Email" />
                        </Form.Item>
                        <Form.Item label="录入时间" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <DatePicker name="enterTime1" />~<DatePicker name="enterTime2" />
                        </Form.Item>
                        <Form.Item label="QQ" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Input name="QQ" />
                        </Form.Item>
                        <Form.Item label="预留字段1" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Input name="reversedOne" />
                        </Form.Item>
                        <Form.Item label="预留字段4" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Input name="reversedFour" />
                        </Form.Item>
                        <Form.Item label="客户来源" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Input name="customerSource" />
                        </Form.Item>
                        <Form.Item label="录入者" labelCol={{ span: 8, offset: 1 }} labelAlign={'right'}  >
                            <Input name="EntryIs" />
                        </Form.Item>
                    </Col>
                    <Col span={24} className='other-item'>
                        <Form.Item label="其他" labelAlign={'right'}  >
                            {
                                selectData.map(item => {
                                    return (<div className='other-item-content' key={item.id} ><Checkbox onClick={(e, x) => slecletHeadle(e, item.id)}><div className={item.falge ? 'checkbox-item checkbox-item2' : 'checkbox-item checkbox-item1'}><div>{item.name}</div><div><CheckOutlined /></div></div></Checkbox></div>)
                                })
                            }
                        </Form.Item>
                    </Col>
                    <Col span={8} offset={8} className='footer-contaner'>
                        <Button type='primary' className='btn-bgc-7'>立即收索</Button>&nbsp;&nbsp;
                        <Button type='primary' className='btn-bgc-8'>清空条件</Button>
                    </Col>
                </Row>
            </ Form >
        </div>
    );
}

export default SearchForm;
